<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
    <script src="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.js"></script>
    <!-- Replace "latest" by the specific version you want to use, e.g. "4.0.0" -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/molstar@latest/build/viewer/molstar.css" />
</head>

<body>
    <h1>Integration of Mol* with MolViewSpec Extension</h1>
    <p>
        This page demonstrates several methods to integrate Mol* Viewer in a web page and use MolViewSpec functionality.
        See the source HTML to see the actual code.
    </p>


    <h2>Method 1: Get MVS view from a server and pass to the viewer</h2>
    <p>
        The recommended method is to serve the MVS view files by your server (either as static files or generated by the
        server on-demand) and call the <code>loadMvsFromUrl</code> method to retrieve and load them.
        This example uses a MVS view file from the address specified in the <code>sourceUrl</code> variable.
        If the MVS view file contains relative references, they will be resolved as relative to <code>sourceUrl</code>.
    </p>

    <div id="viewer1" style="position: relative; width: 500px; height: 500px;"></div>
    <script>
        const sourceUrl = 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1h9t_domain_labels.mvsj';
        molstar.Viewer.create('viewer1', { layoutIsExpanded: false, layoutShowControls: false })
            .then(viewer => viewer.loadMvsFromUrl(sourceUrl, 'mvsj'));
    </script>


    <p>
        A variation of this method uses <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
        <code>loadMvsFromUrl</code> and allows replacing the MVS view after it has been loaded.
    </p>

    <div id="viewer1b" style="position: relative; width: 500px; height: 500px;"></div>
    <button onclick="loadView1();">View 1</button>
    <button onclick="loadView2();">View 2</button>
    <script>
        let theViewer;
        function load(viewer, url, replace) {
            fetch(url)
                .then(response => response.text())
                .then(text => molstar.PluginExtensions.mvs.MVSData.fromMVSJ(text))
                .then(mvsData => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: url, sanityChecks: true, replaceExisting: replace }));
        }
        function loadView1() {
            load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs.mvsj', true);
        }
        function loadView2() {
            load(theViewer, 'https://raw.githubusercontent.com/molstar/molstar/master/examples/mvs/1cbs-focus.mvsj', true);
        }
        molstar.Viewer.create('viewer1b', { layoutIsExpanded: false, layoutShowControls: false })
            .then(viewer => {
                theViewer = viewer;
                loadView1();
            });
    </script>


    <h2>Method 2: Construct MVS view on frontend and pass to the viewer</h2>
    <p>
        Another option is to utilize the MVS builder provided by the extension to build the view on frontend and then
        pass it to the viewer. This example builds the view in plain JavaScript, directly in a &lt;script&gt; tag in
        HTML. However, for a better developer experience consider writing the code in TypeScript.
        If the built MVS view contains relative references, they will be resolved as relative to the URL of this HTML
        page.
    </p>

    <div id="viewer2" style="position: relative; width: 500px; height: 500px;"></div>
    <script>
        // Build an ad-hoc MVS view
        const builder = molstar.PluginExtensions.mvs.MVSData.createBuilder();
        const structure = builder
            .download({ url: 'https://www.ebi.ac.uk/pdbe/entry-files/1cbs.bcif' })
            .parse({ format: 'bcif' })
            .modelStructure({});
        structure
            .component({ selector: 'polymer' })
            .representation({ type: 'cartoon' })
            .color({ color: 'green' });
        structure
            .component({ selector: 'ligand' })
            .label({ text: 'Retinoic acid' })
            .focus({})
            .representation({ type: 'ball_and_stick' })
            .color({ color: '#cc3399' });
        const mvsData = builder.getState();

        // Initialize viewer and load MVSJ
        const mvsj = molstar.PluginExtensions.mvs.MVSData.toMVSJ(mvsData);
        molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
            .then(viewer => viewer.loadMvsData(mvsj, 'mvsj'));

        // // Alternative initialization and loading (avoids encoding and again decoding the data, allows changing the view by using `replaceExisting: true`):
        // molstar.Viewer.create('viewer2', { layoutIsExpanded: false, layoutShowControls: false })
        //     .then(viewer => molstar.PluginExtensions.mvs.loadMVS(viewer.plugin, mvsData, { sourceUrl: undefined, sanityChecks: true, replaceExisting: false }));
    </script>


    <p>
        Again, there is variation with using <code>molstar.PluginExtensions.mvs.loadMVS</code> instead of
        <code>loadMvsData</code>.
    </p>

</body>

</html>